<template>
  <div class="fwbz">
    <router-link class="nav-btn" to="/home"></router-link>
    <div class="fwbz-head">
          <div class="sub-head1 animated rollIn">&nbsp;</div>
          <div class="sub-head2-wrap animated height1 delay-2 ">
            <div class="fwbz-head2">&nbsp;</div> 
          </div>
          <div class="fwbz-head3 animated bounceIn delay-4">&nbsp;</div> 
          <div class="sub-head4 animated fadeIn delay-5">
              <ul class="waves">
                <li class="li1"><span class="ani-li"></span></li>
                <li class="li2"><span class="ani-li"></span></li>
                <li class="li3"><span class="ani-li"></span></li>
              </ul>
          </div> 
           <div class="sub-head5 animated fadeIn delay-5">
              <ul class="waves waves1">
                <li class="li1"><span class="ani-li"></span></li>
                <li class="li2"><span class="ani-li"></span></li>
                <li class="li3"><span class="ani-li"></span></li>
              </ul>
          </div> 
          <div class="fwbz-head6 animated">&nbsp;</div>
          <div class="fwbz-head7 animated" :class="{'game':isbtn}">&nbsp;</div>
    </div>
    <div class="content">
        <img src="" alt="" v-lazy="fwbzimg1">
        <div class="swiper-box">
            <swiper :options="swiperOption" ref="mySwiper" class="btn-show">
              <!-- slides -->
              <swiper-slide>
                 <img width="100%" src="../assets/images/fwbz-gd1.png" />
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/fwbz-gd2.png" />
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/fwbz-gd3.png" />
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/fwbz-gd4.png" />
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/fwbz-gd5.png" />
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/fwbz-gd6.png" />
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/fwbz-gd7.png" />
              </swiper-slide>
            </swiper>
            <div class="tzyl-hand left-move">&nbsp;</div>
        </div>
        <img src="" alt="" v-lazy="fwbzimg2">
        <img src="" alt="" v-lazy="fwbzimg3">
        <img src="" alt="" v-lazy="fwbzimg4">
        <img src="" alt="" v-lazy="fwbzimg5">
        <img src="" alt="" v-lazy="fwbzimg6">
        <img src="" alt="" v-lazy="fwbzimg7">
        <img src="" alt="" v-lazy="fwbzimg8">
        <img src="" alt="" v-lazy="fwbzimg9">
        <img src="" alt="" v-lazy="fwbzimg11">
        <img src="" alt="" v-lazy="fwbzimg12">
        <div class="fwbz-box">
            <img src="" alt="" v-lazy="fwbzimg13">
            <img src="" alt="" v-lazy="fwbzimg14">
            <img src="" alt="" v-lazy="fwbzimg15">
            <div class="fwbz-ico1 drive"></div>
        </div>
    </div>
    
    
    <div class="next-bg">
          <div class="next-3 animated fadeIn "></div>
          <div class="next-4 animated fadeIn "></div>
          <div class="next-5 animated fadeIn "></div>
         <router-link to="/home" class="next-img-wrap">
            <img src="../assets/images/next-2.png" class="next-img" alt="">
         </router-link>
    </div>
    

  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  name: 'fwbz',
  data () {
    return {
        isbtn:true,
        "fwbzimg1" : require('@/assets/images/fwbz-img1.jpg'),
        "fwbzimg2" : require('@/assets/images/fwbz-img2.jpg'),
        "fwbzimg3" : require('@/assets/images/fwbz-img3.jpg'),
        "fwbzimg4" : require('@/assets/images/fwbz-img4.jpg'),
        "fwbzimg5" : require('@/assets/images/fwbz-img5.jpg'),
        "fwbzimg6" : require('@/assets/images/fwbz-img6.jpg'),
        "fwbzimg7" : require('@/assets/images/fwbz-img7.jpg'),
        "fwbzimg8" : require('@/assets/images/fwbz-img8.jpg'),
        "fwbzimg9" : require('@/assets/images/fwbz-img9.jpg'),
        "fwbzimg10" : require('@/assets/images/fwbz-img10.jpg'),
        "fwbzimg11" : require('@/assets/images/fwbz-img11.jpg'),
        "fwbzimg12" : require('@/assets/images/fwbz-img12.jpg'),
        "fwbzimg13" : require('@/assets/images/fwbz-img13.jpg'),
        "fwbzimg14" : require('@/assets/images/fwbz-img14.jpg'),
        "fwbzimg15" : require('@/assets/images/fwbz-img15.jpg'),
        swiperOption: {
         autoplay: true,
         loop: true,
         speed:300,
         slidesPerView: 1,
         effect : 'fade',
         pagination: {
           el: '.swiper-pagination',
           type: 'bullets',
           progressbarOpposite: true,
           bulletElement : 'li',
           dynamicBullets: true,
           dynamicMainBullets: 2,
           hideOnClick: true,
           clickable: true,

         },
       }
    }
  },
  mounted: function(){
  },
  computed: {
     swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  components: {
    swiper,
    swiperSlide
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fwbz{width:100%;overflow: hidden;}
.content img{display: block;width:100%;}

.game{
  -webkit-animation:game 1s ease alternate;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count:infinite;
  animation:game 1s ease alternate;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;
}
@-webkit-keyframes game {
 0%{-webkit-transform: scale(1)}
 100%{-webkit-transform: scale(0.9)}
}
@keyframes game {
  0%{transform: scale(1)}
 100%{transform: scale(0.9)}
}

.fwbz-head{width: 100%;height: 31.3rem;background: url(../assets/images/fwbz-banner.jpg) no-repeat;background-size: 100% 100%}
.sub-head2-wrap{position: absolute;left: 8.55rem;top: 5.575rem;width: 0.875rem;}
.fwbz-head2{width: 0.875rem;height: 5.6rem;background: url(../assets/images/fwbz-head2.png) no-repeat;background-size: 100% 100%;}
.fwbz-head3{position: absolute;left: 3.525rem;top: 5.25rem;width: 11.65rem;height: 14.2rem;background: url(../assets/images/fwbz-head3.png) no-repeat;background-size: 100% 100%;}
.sub-head4{top: 14.425rem;left: 2.6rem;}
.sub-head5{left: 13.4rem;top: 14.425rem;}
.fwbz-head6{position: absolute;left: 3.9rem;top: 15.4rem;width: 13.075rem;height: 14.525rem;background: url(../assets/images/banner-fwbz.gif) no-repeat;background-size: 100% 100%;}
.fwbz-head7{position: absolute;left: 2.7rem;top: 15.55rem;width: 15.125rem;height: 15.7rem;background: url(../assets/images/fwbz-head7.png) no-repeat;background-size: 100% 100%}
.swiper-box{position: relative;width: 15.3rem;height: 8.95rem;background: url(../assets/images/fwbz-box.jpg) no-repeat;background-size: 100% 100%;padding: 0 1.35rem 0.925rem 1.35rem;}
.content >>> .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
}
.content >>> .swiper-pagination-bullet-active {
    opacity: 1;
    background: #000;
}
.content >>> .swiper-pagination-fraction,.content >>>  .swiper-pagination-custom,.content >>>  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0px;
    left: 50%;
    width: 100%;
}
.tzyl-hand{position: absolute;left: 9.6rem;bottom: -0.2rem;width: .97rem;height: 1.07rem;background: url(../assets/images/fwbz-hand.png) no-repeat;background-size: 100% 100%;}
.left-move {
    -webkit-animation-name: left-move;
    animation-name: left-move;
    -webkit-animation-duration:3s;
    animation-duration:3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes left-move{
   0%{opacity:1;transform: translateX(-2.83rem);}
    50%{opacity: 0.8;}
    100%{opacity:1;transform: translateX(0);}
}

@keyframes left-move{
   0%{opacity:1;-webkit-transform: translateX(-2.83rem);}
    50%{opacity: 0.8;}
    100%{opacity:1;-webkit-transform: translateX(0); }
}
.fwbz-box{position: relative;width: 100%;}
.fwbz-ico1{position: absolute;left: 0;top: 4.5rem;width: 3.225rem;height: 3.575rem;background: url(../assets/images/fwbz-ico1.png) no-repeat;background-size: 100% 100%;z-index: 3}
.drive{-webkit-animation: drive 8s linear infinite;animation: drive 20s linear infinite;}
@keyframes drive{
  0%{
    position: absolute;
    left: 0;
    top: 4.6rem;
    opacity: 1;
  }
  30%{
    position: absolute;
    left: 14.05rem;
    top: 4.6rem;
    transform: rotate(0);
    transform-origin: bottom center;
  }
  32%{
    position: absolute;
    left: 14.05rem;
    top: 4.6rem;
    transform: rotate(90deg);
    transform-origin: bottom center;
  }
  48%{
    position: absolute;
    left: 12.65rem;
    top: 10.6rem;
    transform: rotate(90deg);
    transform-origin: bottom right;
  }
  50%{
    position: absolute;
    left: 14.05rem;
    top: 12.6rem;
    transform: rotate(180deg);
    transform-origin: center center;
  }
  68%{
    position: absolute;
    left: 0.4rem;
    top: 12.6rem;
    transform: rotate(180deg);
    transform-origin: center center;
  }
  70%{
    position: absolute;
    left: 0.4rem;
    top: 12.6rem;
    transform: rotate(90deg);
    transform-origin: center center;
  }
  78%{
    position: absolute;
    left: 0.4rem;
    top: 14.0rem;
    transform: rotate(90deg);
    transform-origin: center center;
  }
  80%{
    position: absolute;
    left: 0.4rem;
    top: 14.0rem;
    transform: rotate(0);
    transform-origin: center center;
    opacity: 1
  }
  98%{
    position: absolute;
    left: 7.9rem;
    top: 14.0rem;
    transform: rotate(0);
    transform-origin: center center;
    opacity:1
  }
  100%{
    position: absolute;
    left: 8.25rem;
    top: 14.0rem;
    transform: rotate(0);
    transform-origin: center center;
    opacity: 0
  }
}

@-webkit-keyframes drive{
  0%{
    position: absolute;
    left: 0;
    top: 4.6rem;
    opacity: 1;
  }
  30%{
    position: absolute;
    left: 14.05rem;
    top: 4.6rem;
    -webkit-transform: rotate(0);
    -webkit-transform-origin: bottom center;
  }
  32%{
    position: absolute;
    left: 14.05rem;
    top: 4.6rem;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: bottom center;
  }
  48%{
    position: absolute;
    left: 12.65rem;
    top: 10.6rem;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: bottom right;
  }
  50%{
    position: absolute;
    left: 14.05rem;
    top: 12.6rem;
    -webkit-transform: rotate(180deg);
    -webkit-transform-origin: center center;
  }
  68%{
    position: absolute;
    left: 0.4rem;
    top: 12.6rem;
    -webkit-transform: rotate(180deg);
    -webkit-transform-origin: center center;
  }
  70%{
    position: absolute;
    left: 0.4rem;
    top: 12.6rem;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: center center;
  }
  78%{
    position: absolute;
    left: 0.4rem;
    top: 14.0rem;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: center center;
  }
  80%{
    position: absolute;
    left: 0.4rem;
    top: 14.0rem;
    -webkit-transform: rotate(0);
    -webkit-transform-origin: center center;
    opacity: 1
  }
  98%{
    position: absolute;
    left: 7.9rem;
    top: 14.0rem;
    -webkit-transform: rotate(0);
    -webkit-transform-origin: center center;
    opacity:1
  }
  100%{
    position: absolute;
    left: 8.25rem;
    top: 14.0rem;
    -webkit-transform: rotate(0);
    -webkit-transform-origin: center center;
    opacity: 0
  }
}
</style>
